<template>
    <div class="header">
        <van-icon name="arrow-left" style="margin: 0 .3rem 0 0" />回到上一页
    </div>

    <van-form @submit="onSubmit" class="vanFormWrap">
        <van-cell-group inset>
            <van-field v-model="username" name="en_name" label="用户名" placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                登录
            </van-button>
        </div>
        <div style="margin: 16px;">
            <van-button @click="gotoRegister" round block type="primary" color="#eee" style="color: #007dff" native-type="submit">
                注册账号
            </van-button>
        </div>
    </van-form>

</template>
<script setup>
import requestFn from '@/utils/https';
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { Dialog } from 'vant';
import 'vant/es/dialog/style';

const router = useRouter()

const username = ref('');
const password = ref('');

// 跳转到注册的页面
const gotoRegister = () => {
    router.push({
        path: '/register'
    })
}

// 用户登录事件
const onSubmit = (values) => {
    // console.log('submit', values);
    
    requestFn({
        url: '/mysql_login',
        method: 'get',
        data: { n: values}
    }).then( res => {
        // console.log(res.data)

        // 把登录信息写入cookie
        // 使用 expires 时应该和 cookie 同时写入，否则会形成多个cookie
        // expires 用于设置从 cookie 的过期时间
        // 如果还没有过失效期，即使重新启动电脑，cookie 仍然不会丢失
        // 如果没有指定 expires 值，那么在关闭浏览器时，cookie 即失效。
        // 但cookie不能读取
        // 为了便于演示，咱们先不封装

        // 设置过期时间
        let expires = new Date() 
        expires.setTime(expires.getTime() + 60 * 60 *1000)  // 一个小时之后，cookie失效

        // 把你存入的cookie的多个信息，拼成一个字符串
        let cookieContent = `en_name=${res.data.en_name};cn_name=${res.data.cn_name}`
        console.log(cookieContent)

        // 存入cookie之后，跳转到个人中心页
        document.cookie = 'token=' + encodeURIComponent(cookieContent) + ';expires=' + expires.toGMTString()

        // 提示框
        Dialog.alert({
            title: '注册提示',
            message: res.data.msg
        }).then(() => {

            // 跳转回个人中心页
            router.push({
                path: '/personal'
            });
        })
    })
    
};


</script>


<style lang="less" scoped>
.header {
    margin: 0 .5rem;
    height: 1rem;
    padding: .2rem 0;
    text-align: left;
    font-size: .4rem;
}
.vanFormWrap {
    margin-top: 3rem;
}
</style>

